<template>
  <div id="app">
    <!-- <div class="iconfont icon-loading"></div> -->
    <transition name="slide">
            <Toast v-show="isShowToast"></Toast>
        </transition>
    <Topbar :key="topbarKeyValue "></Topbar>
    <Header></Header>
    <router-view @updateKey="updateKeyFn" />
    <Footer></Footer>
    <Login v-show="isShowLoginModal"></Login>
  </div>
</template>
<script>
import Footer from "@/components/Footer.vue"
import Header from "@/components/Header.vue"
import Topbar from "@/components/Topbar.vue"
import Login from "@/components/Login.vue"
import Toast from "@/components/Toast.vue"
// import axios from "axios"
import {JingpinAPI} from "@/request/api"
import { mapState } from 'vuex'
export default {
  data(){
    return{
      topbarKeyValue:0,
    }
  },
  components:{
    Footer,Header,Topbar,Login,Toast
  },
  async created(){
    /* axios.get("http://kumanxuan1.f3322.net:8881/cms/products/recommend")
    .then((res)=>{
      console.log("请求成功:",res);
    })
    .catch((err)=>{
      console.log("err",err);
    }) */
    let res = await JingpinAPI()
      console.log(res);
    
  },
  computed:{
    ...mapState({
      isShowLoginModal:(state)=>state.showModal.isShowLoginModal,
      isShowToast:(state)=>state.showToast.isShowToast
    })
  },
  watch:{
    '$route.path':{
      handler(newVal,oldVal){
        if(newVal != oldVal){
          this.topbarKeyValue++
        }
      }
    }
  },
  methods:{
    updateKeyFn(){
      this.topbarKeyValue++
    }
  }
}
</script>

<style lang="less">
// #app {
//   font-family: Avenir, Helvetica, Arial, sans-serif;
//   -webkit-font-smoothing: antialiased;
//   -moz-osx-font-smoothing: grayscale;
//   text-align: center;
//   color: #2c3e50;
// }

.slide-enter, .slide-leave-to{
  opacity: 0;
}

.slide-enter-active, .slide-leave-active{
  transition: opacity .3s linear;
}

.slide-enter-to, .slide-leave{
  opacity: 1;
}
</style>
